#import('Ball.dart');
#import('../Playground.dart');
#import('dart:html', prefix:'html');
#import('dart:dom');
#import('../dartbox2d/lib/box2d.dart');


class Cannon extends BodyDef {
	
	Playground playGround;
	Body cannon;
	BodyDef bodyDef;
	PolygonShape shape;
	RevoluteJointDef jointDef;
	num width, height, angleRads;
	
	Cannon(Playground playarea):
		bodyDef = new BodyDef(),
		jointDef = new RevoluteJointDef(),
		width = 8,
		height = 2.5,
		shape = new PolygonShape() {
		playGround = playarea;
		position.setCoords(-playGround.CANVAS_WIDTH/20+.8,-playGround.CANVAS_HEIGHT/20+.8);
  		shape.setAsBox(width, height);
  		angle = 45;
  		angleRads = angle * Math.PI/180;
  		
  		cannon = playarea.world.createBody(this);
  		cannon.createFixtureFromShape(shape);
	}
	
	void updateAngle(String theta) {
		angle = Math.parseDouble(theta);
		angleRads = angle * Math.PI/180;
		cannon.setTransform(cannon.position, angleRads);
	}
	
	Vector exitPoint() {
		num hypot = width / 2 + 5;
		num x, y;
		x = hypot*Math.cos(angleRads);
		y = hypot*Math.sin(angleRads);
		Vector point = new Vector(cannon.position.x + x, cannon.position.y + y);
		return point;
	}
}

Playground playGround;

void main() {
	Element playArea = document.getElementById('playground');
	playGround = new Playground(playArea);
	playGround.CANVAS_WIDTH += 500;
	playGround.CANVAS_HEIGHT += 300;
	playGround.run();
	
	Cannon c = new Cannon(playGround);
	
	html.Element ballButton = html.document.query('#addBall');
	html.Element clearButton = html.document.query("#clear");
	
	HTMLInputElement angleSlider = document.getElementById('angle');
	HTMLInputElement rad = document.getElementById('radius');
	HTMLInputElement dens = document.getElementById('density');
	HTMLInputElement rest = document.getElementById('restitution');
	HTMLInputElement vel = document.getElementById('vel');
	
	rad.addEventListener("change", (e) => updateElem("#rad", rad.value));
	dens.addEventListener("change", (e) => updateElem("#dens", dens.value));
	rest.addEventListener("change", (e) => updateElem("#rest", rest.value));
	vel.addEventListener("change", (e) => updateElem("#velo", vel.value));
	angleSlider.addEventListener("change", (e) {
		c.updateAngle(angleSlider.value);
		updateElem("#ang", angleSlider.value);
	});
	
	clearButton.on.click.add((e) => clear());
	ballButton.on.click.add((e) => addBall(c));
	html.document.query('#status').innerHTML = 'DART!';
}

void clear() => playGround.bodies.forEach((b) { playGround.world.destroyBody(b);});

void updateElem(String elem, String newValue) => html.document.query(elem).innerHTML = newValue;

void addBall(Cannon cann)
{
	num radius, density, restitution, velocity;
	HTMLInputElement rad = document.getElementById('radius');
	HTMLInputElement dens = document.getElementById('density');
	HTMLInputElement rest = document.getElementById('restitution');
	HTMLInputElement vel = document.getElementById('vel');
	HTMLInputElement color = document.getElementById('color');
	
	Color3 c3 = new Color3();
	switch(color.value) {
		case "Red": c3.setFromRGB(255, 0, 0); break;
		case "Blue" : c3.setFromRGB(0.1, 0.1, 1); break;
		case "Green": c3.setFromRGB(0, 255, 0); break;
	}
	
	velocity = Math.parseDouble(vel.value);
	num velx = velocity * Math.cos(cann.angleRads);
	num vely = velocity * Math.sin(cann.angleRads);
	
	Ball b = new Ball();
	b.radius = Math.parseDouble(rad.value);
	b.density = Math.parseDouble(dens.value);
	b.restitution = Math.parseDouble(rest.value);
	b.linearVelocity.setFrom(new Vector (velx, vely));
	b.position.setFrom(cann.exitPoint());
	
	final ball = playGround.world.createBody(b);
	ball.createFixture(b.fixture);
	ball.color.setFrom(c3);
	playGround.bodies.add(ball);
}